<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
			height: $wanlshop.wanlsys().height + 'px', 
			paddingTop: $wanlshop.wanlsys().top + 'px',
			color: '#333333',
			backgroundColor: '#fff',
		}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content text-bold" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					首页
				</view>
				<view class="action" @tap="$wanlshop.backHome()">
					<text class="iconfont icon-ipr_shouye text-bold" style="font-size: 44rpx;"></text>
				</view>
			</view>
		</view>
		<view v-if="showPage =='2'">
			<web-view src="" @message="handleMessage"></web-view>
		</view>
		<view v-else :class="[index==0?'flexz flex-column vh100 w100':'flexz flex-column vh100 w100']">
			<view :class="[tabList.length>1?'u-flex-2':'u-flex-2','bg-white w100']">
				<view class="plr-36 flexz">
					<view class="img-pic" @click="toMy">
						<image :src="token?'/static/img/home-online.png':'/static/img/home-offline.png'" mode=""></image>
					</view>
					<view class="img-logo">
						<!-- 					<image :src="$wanlshop.oss('/uploads/staticImage/images/default/title.png')" mode=""></image>
 -->
						<view class="allPeople">{{titleHeader}}</view>
					</view>
					<view class="" style="width: 76rpx;"></view>
				</view>
				<!-- <view :class="['center','relative',tabList.length>1?'pd-20':'pd-40']" @click=
			"getCity">
				<view class="size-34 mr-10">{{city}}</view>
				<u-icon name="arrow-down"></u-icon>
			</view> -->
				<u-tabs :list="tabList" font-size="28" bg-color="#fff" height="90" active-color="#00C28E"
					inactive-color="#777" :is-scroll="false" :current="index" @change="change">
				</u-tabs>
			</view>
			<view class="u-flex-7 w100" style="height:10%">
				<map id="map" style="width: 100%; height: 100%;position: relative;" :latitude="latitude"
					:longitude="longitude" :markers="covers" :polyline="polyline" @regionchange="getCenterMap">
					<!-- <cover-image class="" @click="toAnquan" style="width: 210rpx;height: 80rpx;position: absolute;bottom: 140rpx;left: 30rpx;"`	
				 src="@/static/img/anquan.png"></cover-image> -->
					<!-- <cover-image class="" @click="toMy"
					style="width: 210rpx;height: 80rpx;position: absolute;bottom: 240rpx;left: 30rpx;"
					src="@/static/img/home-user1.png"></cover-image> -->
					<cover-image @click="toDetail" v-if="list.length>0&&list[0].status==0" class=""
						style="width: 100%;height: 80rpx;position: absolute;bottom: 20rpx;left: 0rpx;"
						:src="$wanlshop.oss('/uploads/staticImage/img/home-1.png"')"></cover-image>
						
					<cover-image @click="toDetail" v-if="list.length>0&&(list[0].status==1||list[0].status==5)" class=""
						style="width: 100%;height: 80rpx;position: absolute;bottom: 20rpx;left: 0rpx;"
						:src="$wanlshop.oss('/uploads/staticImage/img/home-2.png"')"></cover-image>
					<cover-image @click="toDetail" v-if="list.length>0&&list[0].status==4" class=""
						style="width: 100%;height: 80rpx;position: absolute;bottom: 20rpx;left: 0rpx;"
						:src="$wanlshop.oss('/uploads/staticImage/img/home-3.png"')"></cover-image>
					<cover-image @click="toDetail" v-if="list.length>0&&list[0].status==2" class=""
						style="width: 100%;height: 80rpx;position: absolute;bottom: 20rpx;left: 0rpx;"
						:src="$wanlshop.oss('/uploads/staticImage/img/home-4.png"')"></cover-image>
					<cover-image @click="toDetail" v-if="list.length>0&&list[0].status==3" class=""
						style="width: 100%;height: 80rpx;position: absolute;bottom: 20rpx;left: 0rpx;"
						:src="$wanlshop.oss('/uploads/staticImage/img/home-5.png"')"></cover-image>
					<cover-view v-if="showTime" @click="showTime=false"
						style="width: 100%;height: 100%;background-color: rgba(0,0,0,.7);"></cover-view>
					<cover-image @click="goCenter" class=""
						style="width:100rpx;height: 100rpx;position: absolute;bottom: 120rpx;right: 10rpx;"
						:src="$wanlshop.oss('/uploads/staticImage/img/now1.png"')"></cover-image>
				</map>
			</view>

			<view class="u-flex-7 w100" v-show="current==0">
				<indexAddress :location="longitude+','+latitude" @close="showTime=false" @showTime="showTime=true"
					:other="other" :showTime="showTime" :city="city"></indexAddress>
			</view>

			<view class="u-flex-7 w100" v-show="current==1">
				<indexAddress2 :location="longitude+','+latitude" @close="showTime=false" @showTime="showTime=true"
					:other="other" :showTime="showTime" :city="city"></indexAddress2>
			</view>

			<view class="u-flex-7 w100" v-show="current==2">
				<indexAddress3 :location="longitude+','+latitude" @close="showTime=false" @showTime="showTime=true"
					:other="other" :showTime="showTime" :city="city"></indexAddress3>
			</view>

		</view>
	</view>
</template>

<script>
	import amapFile from '@/libs/amap-wx.js'
	import Voice from '@/components/baidu.js';
	import indexAddress2 from '@/components/daijia/index-address2.vue';
	import indexAddress3 from '@/components/daijia/index-address3.vue';
	import indexAddress from '@/components/daijia/index-address.vue';
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				showPage: '',
				index: 0,
				current: 0,
				timer3: null,
				other: {}, //代人叫车
				list: [],
				hylist: [],
				timer: null,
				showTime: false,
				// 地图
				amapPlugin: null,
				key: '0fd25b39ca0d4fd04da1cb5fd08db15a',
				latitude: '',
				longitude: '',
				titleHeader: '',
				latitude1: '', // 打开地图时的中心点
				longitude1: '', // 打开地图时的中心点
				polyline: [],
				mapContext: null,
				appMap: null,
				userInfo: {}
			}
		},
		computed: {
			...mapState(['city', 'height', "start", "tabList", 'token']),
			covers() {
				return [{
					id: 1,
					latitude: this.latitude,
					longitude: this.longitude,
					// #ifdef MP-WEIXIN
					iconPath: '..//static/img/now.png',
					// #endif
					// #ifndef MP-WEIXIN
					iconPath: '..//static/img/now2.png',
					// #endif
					title: '当前位置',
					width: 30,
					height: 45
				}]
			}
		},
		//分享
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {

			}
		},
		onShareTimeline(res) {

			return {

			}
		},
		onReady() {

			this.mapContext = uni.createMapContext('map')

			// #ifdef APP-PLUS
			this.appMap = this.mapContext.$getAppMap()
			let _this = this
			console.log("startstart")
			this.appMap.onstatuschanged = function(e) {
				console.log("eeeee", e)
				_this.latitude = e.center.latitude
				_this.longitude = e.center.longitude

				_this.amapPlugin.getRegeo({
					location: e.center.longitude + ',' + e.center.latitude,
					success(data) {

						let city;
						// if (!_this.city) {
						if (typeof data[0].regeocodeData.addressComponent.city == 'object') {
							city = data[0].regeocodeData.addressComponent.province
						} else {
							city = data[0].regeocodeData.addressComponent.city
						}
						// _this.$store.commit('getCity', city)
						// }else{
						// 	city = _this.city
						// }
						let start = {
							city: city,
							latitude: data[0].latitude,
							longitude: data[0].longitude,
							address: data[0].name,
							name: data[0].desc,
							flag: true
						}
						_this.$store.commit('getStart', start)

					}
				})
			}
			// #endif
		},
		onLoad(option) {
			this.getTitle()
			this.getpush()
			this.timer3 = setInterval(() => {
				if (this.tabList && this.tabList[0]) {
					this.current = this.tabList[0].id
					clearInterval(this.timer3)
					this.timer3 = null
				}
			}, 200)
			// 定位
			this.amapPlugin = new amapFile.AMapWX({
				key: this.key
			});
			uni.$on('other', (data) => {
				this.other = data
			})
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		},
		onUnload() {
			uni.$off('other')
			clearInterval(this.timer)
			this.timer = null
		},
		onShow() {
			this.getRegeo()
			this.timer = setInterval(() => {
				this.getList()
			}, 3000)
			this.loadData()
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/member/user/info',
					method: 'POST',
					success: res => {

						this.userInfo = res.data
						this.$store.commit('getUserInfo', res.data)
					}
				});

			},
			handleMessage(evt) {
				console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
			},
			getTitle() {
				let tabList = []
				this.$http('/addons/ddrive/banner/market_setting').then(data => {
					console.log(data)
					if (data.dj_status == 1) {
						tabList.push({
							name: '无医疗设备车',
							id: 0
						})
					}
					if (data.sf_status == 1) {
						tabList.push({
							name: '有医疗设备车',
							id: 1
						})
					}
					if (data.dc_status == 1) {
						tabList.push({
							name: '有医护医疗设备车',
							id: 2
						})
					}
					this.$store.commit('getTab', tabList)
					
					this.showPage = data.dj_status
					this.titleHeader = data.title

				}).catch(e=>{
					console.log(e)
				})

			},
			getpush: function() {
				// #ifdef APP-PLUS  
				// plus.push.addEventListener('receive', function(msg) {

				// 	// _this.msg = JSON.stringify(msg)
				// 	plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				// 		if (plus.os.name.toLowerCase() === 'android') {
				// 			Voice(msg.content);
				// 		} else {
				// 			Voice(msg.payload.content);
				// 		}
				// 	})
				// }, true)
				// #endif
			},
			getCenterMap() {
				let _this = this
				// #ifdef MP-WEIXIN
				this.mapContext.getCenterLocation({
					success: (res) => {
						console.log("resssss", res)
						if (res.longitude != 0) {
							_this.longitude = res.longitude
							_this.latitude = res.latitude
							_this.mapContext.translateMarker({
								markerId: 1,
								destination: {
									longitude: res.longitude,
									latitude: res.latitude
								},
								duration: 2000,
								animationEnd() {

								}
							})
							_this.amapPlugin.getRegeo({
								location: res.longitude + ',' + res.latitude,
								success(data) {

									let city;
									if (!_this.city) {
										if (typeof data[0].regeocodeData.addressComponent.city ==
											'object') {
											city = data[0].regeocodeData.addressComponent.province
										} else {
											city = data[0].regeocodeData.addressComponent.city
										}
									}
									let start = {
										city: city,
										latitude: data[0].latitude,
										longitude: data[0].longitude,
										address: data[0].name,
										name: data[0].desc,
										flag: true
									}
									_this.$store.commit('getStart', start)
								}
							})
						}
					}
				})
				// #endif
			},
			goCenter() {
				this.mapContext.moveToLocation({
					longitude: this.longitude1,
					latitude: this.latitude1,
					success() {

					}
				})
			},
			getList() {
				this.$http('/addons/ddrive/order/order_taking', {}, "POST").then(data => {
					this.list = data.data
					this.hylist = data.hy
				})
			},
			toDetail() {
				if (this.list.length == 1) {
					uni.navigateTo({
						url: '/pages/transport/home/detail?id=' + this.list[0].id
					})
				} else {
					uni.navigateTo({
						url: '/pages/transport/my/order/dj-order'
					})
				}
			},
			toAnquan() {
				uni.navigateTo({
					url: '/pages/transport/home/security'
				})
			},
			change(index) {
				this.index = index;
				this.current = this.tabList[index].id;
				if (this.current == 2) {
					uni.$emit('price')
				}
			},
			toMy() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/transport/my/index'
					})
				} else {
					uni.navigateTo({
						// url: '/pages/transport/login/login'
						url: '/pages/user/auth/name'
					})
				}
			},
			// 获取定位
			getRegeo() {
				let _this = this
				// uni.showLoading({
				// 	title: '获取定位信息中'
				// });
				this.amapPlugin.getRegeo({
					success: (data) => {
						let city;
						// if (!_this.city) {
						if (typeof data[0].regeocodeData.addressComponent.city == 'object') {
							city = data[0].regeocodeData.addressComponent.province
						} else {
							city = data[0].regeocodeData.addressComponent.city
						}
						// _this.$store.commit('getCity', city)
						// }else{
						// 	city = _this.city
						// }
						_this.latitude = data[0].latitude
						_this.longitude = data[0].longitude
						_this.latitude1 = data[0].latitude
						_this.longitude1 = data[0].longitude
						if (!_this.start.name) {
							console.log(11111)
							let start = {
								city: city,
								latitude: data[0].latitude,
								longitude: data[0].longitude,
								address: data[0].name,
								name: data[0].desc,
								flag: true
							}
							_this.$store.commit('getStart', start)
							console.log(this.start)
						}

						// uni.hideLoading();
					},
					fail: (msg) => {
						console.log('1');
						// uni.showToast({
						// 	title: '没有开启位置权限',
						// 	icon: 'none'
						// })
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.allPeople {
		font-size: 34rpx;
		font-weight: bold;
		color: rgb(0, 194, 142);
	}

	.img-pic {
		image {
			width: 76rpx;
			height: 76rpx;
		}
	}

	.img-logo {
		image {
			width: 168rpx;
			height: 42rpx;
		}
	}
</style>